<template>
<div class="sort-item border-radius_1">
    <div class="container">
        <el-image
            class="border-radius_1"
            :src="item.website.icon"
            fit="cover">
            <div slot="error">
            </div>
        </el-image>
        <div class="container">
            <div class="name">
                {{item.website.name}}
            </div>
            <div 
                class="type border-radius_2"
                :style="{
                    color:currentType==item.type?'#0084ff':'',
                    fontWeight:currentType==item.type?'bold':'',
                    backgroundColor: currentType==item.type?'rgba(0, 132, 255, 0.25)':'',
                }">
                {{item.type}}
            </div>
        </div>
    </div>
    <div class="msg" v-if="item.website.defined"></div>
</div>
</template>

<script>
/*
 排序网站item
 */
export default {
    name: 'SortItem',
    props:{
        item:{
            type:Object,
            default:()=>{
                return {};
            },
        },
        currentType:{  //是否是当前选中的type
            type:String,
            default:'',
        },
    },
}
</script>
<style lang="scss" scoped>
.sort-item{
    width:100%;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 7px;
    transition: all 0.2s;
    box-sizing: border-box;
    cursor: all-scroll;
    position: relative;
    background-color: #fafafa;
    color: #444d58;
    overflow: hidden;
    &:hover{
        background-color: #00000010;
    }
    >.container{
        display: grid;
        grid-template-columns:min-content 1fr;
        align-items: center;
        grid-gap: 5px;
        /deep/.el-image{
            width: 30px;
            min-width: 30px;
            height: 30px;
            img{
                width: 30px;
                height: 30px;
            }
        }
        >.container{
            display: grid;
            grid-template-columns: 1fr;
            text-align: left;
            line-height: 1.5;
            >.name{
                font-size: 12px;
                overflow: hidden;
                display: inline-block;
                white-space: nowrap;
                width: 100%;
                overflow: hidden;
                text-overflow: ellipsis;
                font-weight: bold;
            }
            >.type{
                font-size: 12px;
                opacity: 0.7;
                overflow: hidden;
                display: inline-block;
                white-space: nowrap;
                width:fit-content;
                overflow: hidden;
                text-overflow: ellipsis;
                padding: 0 3px;
            }
        }
    }
    >.msg{  //提示该网址是不是自定义
        height: 15px;
        width: 15px;
        background-color: #00b15f;
        position: absolute;
        bottom: -8.5px;
        left: -8.5px;
        transform: rotate(45deg);
    }
}
</style>

